<template>
  <div class="components-input-demo-presuffix">
    <template>
      <a-tree-select
        style="width: 100%"
        v-model="value"
        :tree-data="treeData"
        :tree-checkable='multi'
        :treeExpandedKeys="expandedKeys"
        :show-checked-strategy="SHOW_PARENT"
        @change="onChange"
        @treeExpand='treeExpand'
      />
    </template>
  </div>
</template>

<script>
import { TreeSelect } from 'ant-design-vue';
import { queryDistrictTreeList } from '@/api/api'
const SHOW_PARENT = TreeSelect.SHOW_PARENT;

export default {
  props:['multi','districtTreeId'],
  data() {
    return {
      treeData:[],
      value:'',
      SHOW_PARENT,
      expandedKeys:[],
    };
  },
  created(){
    this.loadData();
  },
  methods:{
    treeExpand(keys){
      this.expandedKeys=keys
    },
    loadData(){
      queryDistrictTreeList().then(res=>{
        if(res.success){
          let arr = [...res.result]
          this.treeData = arr
          this.initExpandedKeys(res.result)
        }
      })
    },
    onChange(value) {
      this.districtTreeId = value;
    },
    initExpandedKeys(arr){
      if(arr && arr.length>0){
        let keys = []
        for(let item of arr){
          if(item.children && item.children.length>0){
            keys.push(item.id)
          }
        }
        this.expandedKeys=[...keys]
      }else{
        this.expandedKeys=[]
      }
    },
  }
};
</script>

<style scoped>
  .components-input-demo-presuffix .anticon-close-circle {
    cursor: pointer;
    color: #ccc;
    transition: color 0.3s;
    font-size: 12px;
  }
  .components-input-demo-presuffix .anticon-close-circle:hover {
    color: #f5222d;
  }
  .components-input-demo-presuffix .anticon-close-circle:active {
    color: #666;
  }
</style>